<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.augmentum.oes.Constants" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Create Exam</title>
      <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/main.css" type="text/css" />
      <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/question.css" type="text/css" />
      <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/createexam.css" type="text/css" />
      
      <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
      <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js"></script>
      <script src="<%=PropertyUtil.getStaticPath() %>/static/js/question.js"></script>
      <script src="<%=PropertyUtil.getStaticPath() %>/static/js/createexam.js"></script>
      
  </head>
  <body>
    <div class="header">
      <div class="logo-icon">
      </div>
      <div class="head-title">
        Online Exam System
      </div>
      <div class="user-logout">
        <div class="language">
            ENGLISH
        </div>
        <div class="person-info-outdiv">
          <div onclick="javascript:window.location.href='<%=PathUtil.getFullPath("userdetail.action")%>'" class="person-info-inner float-left"><div class="person-info-inner"><img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Web_PersonalInformation_20x20.png" class="person-info-currentpage"></div>
          <span >${USER.userName}</span></div>
          <div class="logout1" onclick="javascript:window.location.href='../static/logout.jsp'">Logout</div>
        </div>
      </div>
    </div>
    <div class="tab-panel"> 
    <div class="question-manage " onclick="toQuestionList();">
      Question Management
    </div>
    <div class="exam-manage active" onClick="toExamList();" >
      Exam Management
    </div>
    </div>
    <div class="breadcrumb"><a onclick="toExamList();" class="cursor">Exam Management</a> > <label >Create Exam</label></div>
    <div class="content-panel content-panel-breadcrumb">
    <div class="content-empty-panel">
          <c:if test="${!empty TIP_MESSAGE }">
          <script>
          modalDialogShow('${TIP_MESSAGE}');
          </script>
          </c:if>
          <c:if test="${!empty TIP_MESSAGE }">
             <script>
               $(function(){modalDialogShow('${TIP_MESSAGE}')});
             </script>
           </c:if>
           <c:if test="${!empty success }">
             <script>
               $(function(){confirmDialogShow('${success}')});
             </script>
           </c:if>
           <%
             session.removeAttribute("errorMessage");
             session.removeAttribute("TIP_MESSAGE");
             session.removeAttribute("success"); 
           %>
          
           <form action="<%=PathUtil.getFullPath("createexam.action") %>" method="POST" id="createExamForm" >
                <div class="div-table">
            <div class="tr exam-name">
                <div class="exam-name-label">
                    Exam Name:
                </div>
                <div class="exam-name-input">
                    <input onblur="recheckForm();" value="${examobject.examName }" type="text" id="examName" name="examName" placeholder="Please input exam name"/>
                </div>
                <div class="common-error-label error-label" id="examNameError" style="margin-top: -20px;">
                </div>
            </div>
            <div class="tr exam-description">
                <div class="exam-description-label">
                    Description:
                </div>
                <div class="exam-description-input">
                    <textarea name="description" id="description"  onblur="recheckForm();" onmousedown="textarea(event,this)">${examobject.description }</textarea>
                </div>
                <div class="common-error-label error-label" id="descriptionError" style="margin-top: -20px;">
                  
                </div>
            </div>
            <div class="tr">
                <div class="exam-name-label">
                    Effective Time:
                </div>
                <div class="exam-name-input">
                    
                    <input type="date" id="date" style="width:140px;" onchange="validTime();" placeholder="Please selected date"/>
                    <input type="time" id="time" style="width:100px;" onchange="validTime();" placeholder="00:00"/>
                    <input type="hidden" id="effectivetime" value="${examobject.effectiveTime}" name="effectiveTime"/> 
                </div>
                <div class="effective-time-error error-label" id="timeError" style="margin-top:-20px;" >
                </div>
            </div>
            <div class="tr">
                <div class="exam-name-label">
                    Duration:
                </div>
                <div class="exam-name-input">
                    <select name="duration" id="duration" onchange="validTime();">
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                        <option>60</option>
                    </select>&nbsp;&nbsp;Min
                </div>
             <div class="duration-error error-label" id="durationError" style="margin-top:-20px;">
                  
             </div>
             </div>
    
            <div class="tr question-setting">
                <div class="exam-description-label">
                    Question Setting:
                </div>
                <div class="question-setting">
                    <div style="height:47px;">
                    <div class="name-label">
                        Question Quantity:
                    </div>
                    <div class="input-label">
                        <input type="text" onblur="recheckForm();recheckSetting();" onkeyup="getTotalScore();" value="${examobject.questionQuantity}" id="quantity" name="questionQuantity">
                    </div>
                    <div class="name-label">
                        Question Points:
                    </div>
                    <div class="input-label">
                        <input type="text" onblur="recheckForm();recheckSetting();" onkeyup="getTotalScore();" value="${examobject.questionPoints}" id="points" name="questionPoints">
                    </div>
                    </div>
                    <div style="height:20px;">
                    <div class="name-label">
                        Total Score:
                    </div>
                    <div class="input-label">
                        <input type="text" onblur="recheckForm();recheckSetting();" id="totalScore" value="${examobject.totalScore}" disabled name="totalScore">
                    </div>
                    <div class="name-label">
                        Pass Criteria:
                    </div>
                    <div class="input-label" onblur="recheckForm();" >
                        <input type="text" name="passCriteria" onblur="recheckForm();recheckSetting();" value="${examobject.passCriteria}" id="passcriteria">
                    </div>
                    </div>
                </div>
                <div class="setting-error error-label" id="settingError" style="margin-top: -65px;">
                  
                </div>
            </div>
            
            
                  <div class="edit-outdiv">
                    <div class="edit-button" onclick="submitCreateExam();"  onmouseout="this.className='edit-button'" onmouseover="this.className='edit-button-over'" style="float:left;">
                      Create
                    </div>
                    <div class="edit-button" onClick="toExamList();" onmouseout="this.className='edit-button'" onmouseover="this.className='edit-button-over'" style="float:right;" >
                      Cancel
                    </div>
                  </div>
        </div> 
           </form>
         </div>
       </div>
    <div class="footer">
      <p> Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <div class="modal-dialog" id="modalDialog">
      <div onclick="modalDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton"></div>
      <div class="modal-dialog-msg" id="msgContent"></div>
      <div class="modal-dialog-btn-outdiv">
         <div class="modal-btn modal-dialog-btn-yes single-button" onclick="toExamListEnd('${pagnation.pageCount}');">OK</div>
      </div>
    </div>
    <div class="modal-dialog" id="confirmDialog">
      <div onclick="confirmHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="confirmContent">
      </div>
      <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes" onclick="confirmHidden();">Create Another</div>
        <div class="modal-btn modal-dialog-btn-no" onclick="toExamListEnd('${pagnation.pageCount}');">View Question</div>
      </div>
    </div>
    <div class="modal-div" id="modalDiv"></div>
  </body>
</html>